'use client'

import classNames from '@/util/classnames'
import data from '@emoji-mart/data'
import { init } from 'emoji-mart'
import type { FC } from 'react'
import './style.css'

init({ data })

export type AppIconType = 'image' | 'emoji'

export type AppIconProps = {
  size?: 'xs' | 'tiny' | 'small' | 'medium' | 'large'
  rounded?: boolean
  iconType?: AppIconType | null
  icon?: string
  background?: string | null
  imageUrl?: string | null
  className?: string
  innerIcon?: React.ReactNode
  onClick?: () => void
}

const AppIcon: FC<AppIconProps> = ({
  size = 'medium',
  rounded = false,
  iconType,
  icon,
  background,
  imageUrl,
  className,
  innerIcon,
  onClick
}) => {
  const wrapperClassName = classNames('appIcon', size, rounded && 'rounded', className ?? '', 'overflow-hidden')

  const isValidImageIcon = iconType === 'image' && imageUrl

  return (
    <span
      className={wrapperClassName}
      style={{ background: isValidImageIcon ? undefined : background || '#FFEAD5' }}
      onClick={onClick}
    >
      {isValidImageIcon ? (
        <img src={imageUrl} className="h-full w-full" alt="app icon" />
      ) : (
        innerIcon || (icon && icon !== '')
      )}
    </span>
  )
}

export default AppIcon
